import Qt 4.7

Component {
	id: seriesDelegate

	Item {
		id: series

		signal clicked()

		width: listView.width - 10
		height: topLayout.height + 14

		property real detailsOpacity: 0.0

		Component.onCompleted: { serieModel.load(seriesid) }

		SerieModel {
			id: serieModel

			onStatusChanged: {
				if (status == XmlListModel.Ready) {
					if (serieModel.get(0).rating != '') ratingBar.state = 'Show'
					ratingBar.rating = Number(serieModel.get(0).rating)
				}
			}
		}

		Rectangle {
			color: "black"
			anchors.fill: parent
		}

		MouseArea {
			anchors.fill: topLayout
			onClicked: { series.state = 'ShowDetails'; series.clicked(); console.log("Item '" + name + "' clicked") }
		}

		Item {
			id: topLayout
			x: 20; width: parent.width; height: titlePoster.height

			Image {
				id: titlePoster
				width: 35
				height: 50
				anchors.top: parent.top
				anchors.left: parent.left
				source: "http://thetvdb.com/banners/_cache/posters/" + seriesid + "-1.jpg"
				fillMode: Image.PreserveAspectFit
			}

			Text {
				id: titleLabel
				text: name
				color: "white"
				anchors { top: topLayout.top; left: titlePoster.right; leftMargin: 10; right: topLayout.right }

				font.pixelSize: 16
				font.bold: true;
				//wrapMode: Text.WordWrap

				clip: true
			}

			RatingBar {
				id: ratingBar
				anchors { top: titleLabel.bottom; topMargin: 10 ; left: titlePoster.right; leftMargin: 10; right: topLayout.right }
				//state: 'Show'
			}
		}

		Item {
			id: detailLayout
			width: parent.width
			anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
			anchors.horizontalCenter: parent.horizontalCenter

			opacity: series.detailsOpacity

			Text {
				id: overviewTitle
				anchors.top: parent.bottom
				text: "Overview"
				color: "white"
				font.pixelSize: 20
				font.bold: true
			}

			Flickable {
				id: flick
				width: parent.width
				anchors { top: overviewTitle.bottom; bottom: parent.bottom }
				contentHeight: overviewText.height
				clip: true

				Text { id: overviewText; color: "white"; text: overview; wrapMode: Text.WordWrap; width: detailLayout.width }
			}

			Image {
				anchors { right: flick.right; top: flick.top }
				source: "pics/moreUpW.png"
				opacity: flick.atYBeginning ? 0 : 1
			}

			Image {
				anchors { right: flick.right; bottom: flick.bottom }
				source: "pics/moreDownW.png"
				opacity: flick.atYEnd ? 0 : 1
			}
		}

		states: State {
			name: "ShowDetails"

			//PropertyChanges { target: background; color: "white" }
			PropertyChanges { target: titlePoster; height: 130; width: 90 } // Make picture bigger
			PropertyChanges { target: series; detailsOpacity: 1.0; x: 0 } // Make details visible
			PropertyChanges { target: series; height: listView.height } // Fill the entire list area with the detailed view

			// Move the list so that this item is at the top.
			PropertyChanges { target: series.ListView.view; explicit: true; contentY: series.y }

			// Disallow flicking while we're in detailed view
			PropertyChanges { target: series.ListView.view; interactive: false }
		}

		transitions: Transition {
			// Make the state changes smooth
			ParallelAnimation {
				//ColorAnimation { property: "color"; duration: 500 }
				NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
			}
		}
	}
}
